<!-- 工程项目 详情 -->
<template>
  <div class="engineeringInfo">
    <NavBarHeader class="navBarHeader"></NavBarHeader>
    <div class="containerNode">
      <div class="contentBox">
        <div class="leftBox">
        <div class="leftNode">
          <div class="titleIcon" v-if="titleList.need_paytype">
          <div class="titleName">{{titleList.need_paytype}}</div>
        </div>
        <div class="engineeringTitle">{{titleList.need_name}}</div>
      </div>
      <div class="typeContainer">
      <div class="typeDataBox">
        <div class="typeLeftBox" v-if="titleList.need_type">
          <div class="typeTitle">工程类型：</div>
          <span class="typeName" v-for="(item,index) of titleList.need_type" :key="index">{{item}}</span>
        </div>
      </div>
      <div class="nodeListBox">
        <div class="nodeListTitle">
          <div class="itemListNode">
            <div class="BelongingInfo"><span class="colorTitle">所属工程：</span>{{titleList.need_name}}</div>
            <div class="nodeInfo"><span class="colorTitle">施工说明：</span>{{titleList.need_otherexplain?titleList.need_otherexplain:'暂无'}}</div>
           </div>
          <div class="itemDrawing">查看设计图纸</div>
         </div>
         <div class="addressInfo"><span class="colorTitle">施工地点：</span>{{titleList.need_address}}</div>
       </div>
     </div>
    </div>
    <div class="footerListNode">
      <div class="footerTitleBg" v-if="titleList.detail_list.length>0">
        <div class="footerTitleName">寻租机械</div>
        <div class="footertitleList">
          <div>机械数量</div>
          <div>预估总工作量</div>
          <div>进场日期</div>
        </div>
      </div>
      <div class="mechanicsList">
        <div class="rentMachineeryInfo" v-for="(items,i) of titleList.detail_list" :key="i">
          <div class="rentInfoList">
            <div class="leftImgBox">
              <img :src="items.machine_type_icon_url" class="leftImg">
            </div>
            <div class="rentInfoRight">
            <div class="rentInfoRightTitle">{{items.type_detail_name}}</div>
            <div class="rentInfoRightTitleContent">
              <div>机械规格：</div>
              <div>{{items.machine_norm}}</div>
            </div>
          </div>
          </div>
          <div class="rentInfoRightInfo">
            <div class="rightNum">{{items.machine_num}}{{items.machine_num_name}}</div>
            <div class="rightWorkload">{{items.machine_unit_total}}{{items.machine_unit_total_name}}</div>
            <div class="rightTime">{{items.machine_start_time}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
    <FooterBar class="footerBar"></FooterBar>
  </div>
</template>

<script >
import NavBarHeader from "../../../../components/NavBarHeader";
import FooterBar from "../../../../components/FooterBar";
import { rentseekingneeddetails } from "../../../../apis/api.js";
export default {
// import引入的组件需要注入到对象中才能使用
components: {
  NavBarHeader,
  FooterBar,
},
  data() {
 // 这里存放数据
    return {
        customColor:'#FF855B',
        titleList:{},//数据列表
        detailjsons:[],//机械列表数据
      }
    },
// 过滤器
filters: {},
// 监听属性 类似于data概念
computed: {},
// 监控data中的数据变化
watch: {},
// 方法集合
methods: {
    // 获取数据上半部分
    async getNeeddetail(){
      console.log(this.$route.query.id)
      let data = {
        need_id:this.$route.query.id
      }
      let res = await rentseekingneeddetails(data)
      if(res.data.result == '1'){
        this.titleList = res.data.body.result
      }
    },
},
// 生命周期 - 创建完成（可以访问当前this实例）
created() {
  this.getNeeddetail()
},
// 生命周期 - 挂载完成（可以访问DOM元素）
mounted() {},
beforeCreate() {}, // 生命周期 - 创建之前
beforeMount() {}, // 生命周期 - 挂载之前
beforeUpdate() {}, // 生命周期 - 更新之前
updated() {}, // 生命周期 - 更新之后
beforeDestroy() {}, // 生命周期 - 销毁之前
destroyed() {}, // 生命周期 - 销毁完成
ctivated() {} // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style lang='scss' scoped>
.navBarHeader {
  background: #1c1e2b;
  z-index: 1000;
}
.containerNode{
  width: 1180px;
  margin: 70px auto 0 auto;
  display: flex;
  padding-bottom: 40px;
}
.titleIcon{
  background: url('./../../../../../public/img/rent/bgIcon.png') no-repeat;
  background-size: 100%,100%;
  width: 75px;
  height: 26px;
  line-height: 20px;
  text-align: center;
  margin-top: 8px;
}
.leftBox{
  width: 1180px;
  height: 266px;
  box-sizing: border-box;
  margin-top: 20px;
  margin-right: 20px;
  background: #FAFBFC;
}
.leftNode{
  display: flex;
  padding-top: 20px;
  margin-left: 20px;
  box-sizing: border-box;
}
.titleName{
  font-size:12px;
  color: #fff;
  margin-left: -6px;
  margin-top: 4px;
}
.engineeringTitle{
  font-size: 26px;
  color: #000;
  font-family: PingFangSC-Regular, PingFang SC;
  margin-left: 10px;
  width: 1100px;
  display: flex;
  flex-wrap: wrap;
}
.typeContainer{
  display: flex;
  flex-direction: column;
}
.typeDataBox{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
}
.typeLeftBox{
  display: flex;
  align-items: center;
  margin-left: 20px;
}
.typeTitle{
  font-size: 14px;
  color: #999;
  margin-right: 14px;
}
.typeName{
  background: #FFF5F3;
  border-radius: 4px;
  font-size: 12px;
  color: #FF855B;
  padding: 3px 5px 3px 5px;
  margin-right: 10px;
}
.shareBox{
  width: 70px;
  position: absolute;
  left: -10px;
  bottom: -20px;
}
.nodeListBox{
  width: 1140px;
  height: 90px;
  background: #F5F7FA;
  border-radius: 4px;
  margin: 20px auto 0 auto;
}
.nodeListTitle{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 20px 20px 0 20px;
}
.itemListNode{
  display: flex;
  align-items: center;
}
.nodeInfo{
  margin-left: 90px;
}
.addressInfo{
  margin-top: 10px;
}
.colorTitle{
  font-size: 16px;
  color: #999;
}
.BelongingInfo{
  font-size: 16px;
  color: #333;
}
.nodeInfo{
  font-size: 14px;
  color: #333;
}
.itemDrawing{
  font-size: 12px;
  color: #FF855B;
  cursor: pointer;
}
.addressInfo{
  font-size: 14px;
  color: #333;
  margin-left: 20px;
}
.footerListNode{
  margin-top: 30px;
}
.footerTitleBg{
  width: 1180px;
  height: 40px;
  background: #F5F5F5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: #333;
}
.footerTitleName{
  width: 300px;
  padding-left: 20px;
  box-sizing: border-box;
}
.footertitleList{
  width: 850px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.rentMachineeryInfo{
  width: 1180px;
  height: 130px;
  background: #FFFFFF;
  border: 1px solid #E7E7E7;
  margin-top: 20px;
  display: flex;
  align-items: center;
}
.rentInfoList{
  width: 356px;
  height: 130px;
  border-right: 1px solid #E7E7E7;
  margin-left: 20px;
  display: flex;
  align-items: center;
}
.leftImgBox{
  width: 90px;
  height: 90px;
  background: #F5F5F5;
  border-radius: 2px;
  position: relative;
}
.leftImg{
  width: 80px;
  height: 66px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.rentInfoRight{
  display: flex;
  flex-direction: column;
  margin-left: 20px;
}
.rentInfoRightTitle{
  font-size: 16px;
  color: #333;
}
.rentInfoRightTitleContent{
  margin-top: 10px;
  font-size: 14px;
  color: #999;
}
.rentInfoRightInfo{
  width: 920px;
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.rightNum{
  font-size: 16px;
  color: #FF855B;
  margin-left: 5px;
}
.rightWorkload{
  font-size: 16px;
  color: #999;
  margin-left: 50px;
}
.rightTime{
  font-size: 16px;
  color: #999;
}
.pageinationBox{
  margin-top: 20px;
  text-align: right;
}
.bdsharebuttonbox {
  width: 200px;
  height: 60px;
  line-height: 60px;
  background: #fff;
  border: 1px solid #666;
  position: fixed;
  bottom: 36px;
  right: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
</style>
